<template>
  <div class="info-wrap">
    <Title title="分成信息" style="font-size:16px; margin:10px 0 16px 0"/>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="morePriceRules"
      :label-width="labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="分成说明" prop="profitSharingRemark">
            <el-input v-model="formData.morePriceInfo.profitSharingRemark" :maxlength="256" resize="none" class="width240" placeholder="请输入金额说明" type="text" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="rowSpan" :class="{'label-collapse-global': ['小红书', '抖音', '微博', 'B站', '快手'].includes(modelData.platformTypeName)}" class="responsive-col-lg-8">
          <el-form-item label="公司分成比例" prop="profitSharingRatio">
            <el-autocomplete
              v-model="formData.morePriceInfo.profitSharingRatio"
              :fetch-suggestions="querySearch"
              name="deductionRate"
              class="width240"
              size="small"
              type="text"
              placeholder="请输入数值"
              oninput="if(value>100)value=100;if(value<0)value=0;"
              @input="integerInput($event, 'profitSharingRatio')"
              @select="handleSelect"
            >
              <span slot="suffix" class="suffix">%</span>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="达人分成比例">
            <el-input
              v-model="formData.talentSharingRatio"
              disabled
              class="width240"
              size="small"
              type="number"
              placeholder="达人分成比例"
            >
              <span slot="suffix" class="suffix">%</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="保底说明" prop="reason">
            <el-input v-model="formData.morePriceInfo.guaranteeRemark" :maxlength="256" resize="none" class="width240" placeholder="请输入保底金额说明" type="text" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item label="保底金额(元)" prop="guaranteePrice">
            <el-input
              v-model="formData.morePriceInfo.guaranteePrice"
              name="guaranteePrice"
              class="width240"
              size="small"
              type="text"
              oninput="if(value>9999999999)value=9999999999;if(value<0)value=0;"
              placeholder="请输入内容"
              @input="integerInput($event, 'guaranteePrice')"
              @mousewheel.native.prevent
            >
              <span slot="suffix" class="suffix">元</span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import mixins from './mixins';
export default {
  mixins: [mixins],
  model: {
    prop: 'modelData',
    event: 'changeValue'
  },
  props: {
    modelData: {
      type: Object,
      default: () => ({})
    },
    rowSpan: {
      type: Number,
      default: 12
    }
  },
  computed: {
    morePriceRules() {
      const validateType = (msg, item) => {
        return (rule, value, callback) => {
          if (item || item === 0) {
            callback();
          } else {
            callback(new Error(msg));
          }
        };
      };
      const rules = {};
      if (['小红书', '抖音', '微博', 'B站', '快手'].includes(this.modelData.platformTypeName)) {
        rules['profitSharingRatio'] = [{ required: true, trigger: 'blur', validator: validateType('请输入公司分成比例', this.formData.morePriceInfo.profitSharingRatio) }];
      }
      return this.isJournalPlatform ? { ...rules, ...this.formRules } : this.formRules;
    }
  },
  watch: {
    'modelData.morePriceInfo.profitSharingRatio': {
      handler(val) {
        const talentNum = !val && val !== 0 ? null : _.subtract(100, Number(val)).toFixed(2);
        this.$set(this.modelData, 'talentSharingRatio', talentNum);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 限制只能输入正整数或0
    integerInput(text, key) {
      const val = text.replace(/[^\d.]|\./g, '') || null;
      if (this.formData.morePriceInfo[key]) this.formData.morePriceInfo[key] = val;
    },
    querySearch(string, cb) {
      const data = [
        { value: '达人9/飞博1', ratio: '10' },
        { value: '达人8.5/飞博1.5', ratio: '15' },
        { value: '达人8/飞博2', ratio: '20' },
        { value: '达人7/飞博3', ratio: '30' },
        { value: '达人6/飞博4', ratio: '40' },
        { value: '达人5/飞博5', ratio: '50' }
      ];
      cb(data);
    },
    handleSelect(item) {
      this.formData.morePriceInfo.profitSharingRatio = item.ratio;
    }
  }
};
</script>
<style lang="scss" scoped>
.info-wrap {
  .width240 {
    width: 240px;
    ::v-deep {
      .el-select {
        width: 240px;
      }
    }

  }
}
</style>
